<template>
  <div>
    <body>
      <div>
      <el-switch v-model="value3" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      
    </div>
  </body>
    
    
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-col :span="6"></el-col>
    <el-col>
      <el-progress type="circle" :percentage="2" style="padding: 0px 100px 0px 100px"></el-progress>
      <el-progress
        type="circle"
        :percentage="90"
        status="success"
        format="注册成功"
        show-text="ture"
        style="padding: 0px 100px 0px 100px"
      ></el-progress>
      <el-progress
        type="circle"
        :percentage="3"
        status="warning"
        show-text="ture"
        format="注册信息待审核"
        style="padding: 0px 100px 0px 100px"
      ></el-progress>
      <el-progress
        type="circle"
        :percentage="5"
        status="exception"
        show-text="ture"
        format="审核失败"
        style="padding: 0px 100px 0px 100px"
      ></el-progress>
    </el-col>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="审核成功">
            <template slot="formatter">456/2</template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            group-separator=","
            :precision="2"
            decimal-separator="."
            :value="value1"
            :title="title"
          >
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="like ? 521 : 20" title="审核失败">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>




<script>
export default {
  name: "home",
  data() {
    return {
      router: []
    };
  },
  computed: {
    routes() {
      return "";
    }
  },
  methods: {
    goto(url) {
      console.log(url);
      this.$router.replace(url);
    }
  },

  data() {
    return {
      like: true,
      value1: 415,
      value2: 2192,
      title: "今日访问量",
      value3: true,

      value3: true,
      value4: true
    };
  }
};
// var toggleSwitch = document.querySelector(".toggle-switch");
// toggleSwitch.addEventListener("change", function() {
//   // 获取 body 元素
//   var body = document.querySelector("body");

//   // 判断开关是否打开
//   if (toggleSwitch.checked) {
//     // 设置背景颜色为黑色
//     body.style.backgroundColor = "black";
//   } else {
//     // 设置背景颜色为白色
//     body.style.backgroundColor = "white";
//   }
// });
</script>

  
  <style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  background: url(../../assets/01.png) no-repeat;
  background-size: 1380px 300px;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  background: url(../../assets/02.png) no-repeat;
  background-size: 1380px 300px;
}
bar-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bars {
  display: flex;
  justify-content: space-between;
  width: 80%;
  height: 300px;
  margin-top: 20px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #2196f3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
</style>